<template>
  <div id="app" :class="{'full':!this.$route.meta.hasNav}">
    <!-- 挂载路由 -->
    <keep-alive :include="keep">
      <router-view/>
    </keep-alive>
    <!-- 路由变化的话，会影响到全局的渲染 所以这个app.vue也是会多次渲染的 -->
    <!--<h1 v-if="this.$route.meta.isKeep">隐藏</h1>-->
    <!--<h1 v-if="!this.$route.meta.isKeep">显示</h1>-->
    <!-- 底部导航 -->
    <van-tabbar v-if="this.$route.meta.hasNav" v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss">
@media (min-width: 0px) and (max-width: 768px) {

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: calc(100vh - 50px);
    background: #F5F5F5;
    overflow: hidden;

    &.full {
      height: 100vh;
    }
  }
  * {
    scrollbar-color: #e5e5e5 #F0F2F5;
    scrollbar-width: 0px;
  }

  /*滚动条*/
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: #F0F2F5;
  }

  ::-webkit-scrollbar-track {
    background-color: #f7f7f9;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #e5e5e5;
  }
}

/* 中大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 768px) {
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 475px;
    margin: 0 auto;
    height: calc(100vh - 50px);
    background: #F5F5F5;
    overflow: hidden;

    .detailses {
      .van-swipe-item {
        height: 475px !important;
      }
    }

    .van-popup {
      position: fixed;
      left: 50%;
      bottom: 0;
      width: 475px !important;
      margin-left: -240px;
    }

    .van-hairline--top-bottom {
      width: 460px !important;
      left: 50% !important;
      bottom: 0 !important;
      transform: translateX(-50%) !important;
    }

    .van-goods-action, .van-submit-bar {
      position: fixed;
      width: 460px !important;
      left: 50%;
      transform: translateX(-50%) !important;
      z-index: 10 !important;
    }
  }
  * {
    scrollbar-color: #e5e5e5 #F0F2F5;
    scrollbar-width: 0px;
  }

  /*滚动条*/
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F0F2F5;
  }

  ::-webkit-scrollbar-track {
    background-color: #f7f7f9;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #e5e5e5;
  }
}

img {
  object-fit: cover !important;
}

iframe {
  border: none;
  outline: none;
}

</style>

<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  data () {
    return {
      keep: ['Keep']
    }
  },
  mounted () {

  },
  watch: {
    active (path) {
      this.changeActive(path)
      localStorage.setItem('active', path)
      switch (path) {
        case 0:
          this.$router.push('/')
          break
        case 1:
          this.$router.push('/classify')
          break
        case 2:
          this.$router.push('/cart')
          break
        case 3:
          if (localStorage.getItem('token') == null) {
            this.$router.push('/login')
          } else {
            this.$router.push('/my')
          }
      }
    }
  },
  methods: {
    ...mapMutations({
      changeActive: 'tabs/doActive'
    }),

  },
  computed: {
    active: {
      set (val) {
        this.$store.state.tabs.active = val
      },
      get () {
        return this.$store.state.tabs.active
      }
    },
  }
}
</script>
